<template>
  <cloudPage :isLoading="isLoading">
    <cloudHeader slot="gHeader">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #fff"
          >{{ $t("mf.exchange.title") }}</view
        >
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view class="container" v-if="!isLoading">
      <view class="ratio">
        {{ $t("mf.exchange.ratio") }} 1 {{ payItem && payItem.symbol }} =
        {{ ratio }} {{ getCoin }}
      </view>
      <!-- 支付box -->
      <view
        class="exchange-box grace-flex grace-space-between grace-flex-vcenter"
      >
        <view class="flex">{{ $t("mf.exchange.pay") }}</view>
        <view class="flex">
          <view class="flex select-coin" @tap.stop="payShow = true">
            <view class="coin-name">{{ payCoin }}</view>
            <image src="/static/down2.png" alt="down" />
          </view>
        </view>
      </view>

      <view
        class="exchange-box grace-flex grace-space-between grace-flex-vcenter"
      >
        <view class="flex">
          <view class="top-type">{{ $t("mf.exchange.exhcange_num") }}</view>
        </view>
        <view class="flex">
          <input
            class="input"
            type="digit"
            placeholder-style="color: rgba(255,255,255,0.8)"
            v-model="pay_number"
            :placeholder="`${$t('mf.exchange.able_num')} ${
              payItem && payItem.balance
            } ${payItem && payItem.symbol}`"
          />
          <view class="all-exchange" @click="allExchange">{{
            $t("wallet.withdrawPage.all")
          }}</view>
        </view>
      </view>

      <!-- 得到box -->
      <view
        class="exchange-box grace-flex grace-space-between grace-flex-vcenter"
      >
        <view class="title">{{ $t("mf.exchange.get") }}</view>
        <view class="flex">
          <view class="input">{{ getNumber }}</view>
          <view class="flex select-coin">
            <view class="coin-name">{{ getCoin }}</view>
          </view>
        </view>
      </view>
      <!-- 手续费 -->
      <view class="cost_tatio">{{ $t("wallet.cost") }} {{ costRatio }} %</view>
      <view class="service-fee"></view>
      <button
        class="btn"
        @tap.stop="config"
        :loading="loading['asset.exchange']"
        :disabled="loading['asset.exchange']"
      >
        {{ $t("mf.exchange.now_exchange") }}
      </button>
      <view class="explain">{{ $t("mf.exchange.explain") }}</view>
    </view>
    <!-- 支付弹出框 -->
    <graceBottomDialog
      borderRadius="50rpx"
      :show="payShow"
      @closeDialog="payShow = false"
    >
      <view slot="content">
        <view class="select-coin-items">
          <view
            :class="[
              'grace-flex grace-flex-vcenter item',
              index + 1 == exchange_setting.length ? '' : 'b-b-grey',
            ]"
            @tap.stop="paySelect(asset)"
            v-for="(asset, index) in exchange_setting"
            :key="index"
          >
            <view
              class="grace-flex grace-flex-vcenter"
              style="width: 200rpx; text-align: left"
            >
              <image
                style="width: 78rpx; height: 78rpx"
                :src="'/static/mf/home/coin/' + asset.coin_pay + '.png'"
              />
              <view class="ml-20">
                <view class="font-32 color-w cloud-bold-500">{{
                  asset.coin_pay
                }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </graceBottomDialog>

    <!-- 密码框 -->
    <cloudPayPassword
      :show="show"
      @keyboardDone="payPasswordDone"
      @close="show = false"
    ></cloudPayPassword>
  </cloudPage>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      pay_number: null, // 支付数量
      isLoading: false,
      payShow: false, // 支付密码
      payCoin: "",
      getShow: false,
      getCoin: "",
      show: false,
      exchange_setting: [],
      exchangeItem: {},
      exchange_getItem: {},
      costRatio: 0,
    };
  },
  methods: {
    ...mapActions("asset", ["loadAssets", "exchange", "exchangeSetting"]),
    // 选择支付币种
    paySelect(item) {
      this.exchangeItem = item;
      console.log(this.exchangeItem);
      this.payCoin = item.coin_pay; // 把币种给payCoin
      this.getCoin = item.get_list[0].coin_get; // 得到币种
      this.costRatio = item.get_list[0].cost_ratio;
      this.payShow = false;
    },
    // 选择得到币种
    getSelect(item) {
      this.getCoin = item.coin_get; // 把币种给getCoin
      this.exchange_getItem = item;
      this.getShow = false;
    },
    // 全部兑换按钮
    allExchange() {
      this.pay_number = this.payItem.balance;
    },
    // 点击立即兑换
    config() {
      if (!this.pay_number) {
        this.makeToast({
          title: this.$t("mf.exchange.exhcange_kong"),
        });
        return;
      }
      this.show = true;
    },
    // 输入密码兑换
    async payPasswordDone(data) {
      this.show = false;
      console.log(data);
      // 调用兑换接口
      try {
        await this.exchange({
          coin_get: this.getCoin,
          coin_pay: this.payCoin,
          pay_amount: this.pay_number,
          pay_password: data.password,
        });
        this.makeToast({
          title: this.$t("mf.exchange.success"),
        });
        this.loadAssets();
      } catch (error) {
        console.log(error);
      }
    },
  },
  computed: {
    ...mapGetters("asset", ["assets"]),
    // 计算当前兑换比例
    ratio() {
      let price = this.payItem && this.payItem.coin.price;
      return price && price[this.getCoin];
    },
    // 计算可得兑换比例
    getNumber() {
      if (!this.pay_number) {
        return 0;
      }
      return parseFloat(
        this.pay_number * this.ratio -
          (this.pay_number * this.ratio * this.costRatio) / 100
      ).toFixed(4);
    },
    // 得到兑换币种数据
    payItem() {
      console.log(this.payCoin);
      let data;
      this.assets.map((item) => {
        if (item.symbol == this.payCoin) {
          data = item;
        }
      });
      return data;
    },
  },
  async onLoad() {
    // 开启loading
    this.isLoading = true;
    // 加载币种
    await this.loadAssets();
    // 加载交易对
    this.exchange_setting = await this.exchangeSetting();
    // 支付币种，获得币种初始化
    this.exchangeItem = this.exchange_setting[0];
    this.payCoin = this.exchangeItem.coin_pay;
    this.exchange_getItem = this.exchangeItem.get_list[0];
    this.getCoin = this.exchange_getItem.coin_get;
    this.costRatio = this.exchangeItem.get_list[0].cost_ratio;
    // 关闭loading
    this.isLoading = false;
  },
};
</script>

<style>
.container {
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx;
  color: #fff;
}

.flex {
  display: flex;
}

.flex1 {
  flex: 1;
}

.ratio {
  width: 100%;
  height: 100rpx;
  line-height: 80rpx;
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  /* color: rgba(255, 255, 255, 0.8); */
}

.exchange-box {
  width: 100%;
  height: 120rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0rpx 3rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
  border-radius: 12rpx;
  box-sizing: border-box;
  padding: 0rpx 30rpx;
  margin-bottom: 20rpx;
  position: relative;
}

/* .exchange-img {
  background-image: url("/static/exchange.png");
  width: 80rpx;
  height: 80rpx;
  background-size: 100% 100%;
  position: absolute;
  bottom: -50rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
} */
.top-type {
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  /* color: #ffffff; */
}

.all-exchange {
  margin-left: 30rpx;

  padding: 5rpx 20rpx;
  border-radius: 30rpx;
  border: 1rpx solid #fee096;

  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fee096;
  line-height: 33rpx;
  text-align: center;
}

.input {
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  text-align: right;
  /* color: #fff; */
}

.coin-name {
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  /* color: #ffffff; */
}

.select-coin image {
  width: 22rpx;
  height: 22rpx;
  margin-top: 6rpx;
  margin-left: 20rpx;
}

.service-fee {
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  /* color: rgba(255, 255, 255, 0.8); */
  margin-top: 30rpx;
  margin-bottom: 250rpx;
}

.b-b-grey {
  border-bottom: 0.5px solid #1b1b2b;
}

.btn {
  position: absolute;
  left: 122rpx;
  bottom: 120rpx;
  width: 516rpx;
  height: 100rpx;
  background: linear-gradient(270deg, #feecbf 0%, #ffdb86 100%);
  border-radius: 55rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2c3e;
  line-height: 100rpx;
}

.explain {
  position: absolute;
  left: 0rpx;
  bottom: 50rpx;
  width: 100%;
  text-align: center;
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.2);
}

.select-coin-items {
  padding: 20rpx 50rpx;
  background-color: #121212;
  border-radius: 50rpx;
}
.select-coin-items .item {
  padding: 20rpx 0rpx;
}

.able {
  font-size: 28rpx;
  /* color: #fff; */
}
</style>
